<template>
  <view>
    <view class="grace-bg-white">
      <view class="grace-list">
        <view class="items">
          <view class="title">手机号
            <text class="tel">13395****27</text>
          </view>
        </view>
      </view>
    </view>
    <view style="margin-top:36px;">
      <button
        type="primary"
        :disabled="disabled"
        :loading="loading"
        @tap="setLoading"
      >更换手机号</button>
    </view>
    <view class="rule"> <text>一个手机号只能做为一个账号的登录名</text></view>

  </view>
</template>
<script>
var pageObject = {
  data() {
    return {
      defaultSize: "default",
      primarySize: "default",
      disabled: false,
      loading: false
    };
  },
  methods: {
    setLoading: function(e) {
      this.loading = !this.loading;
      this.disabled = !this.disabled;
      uni.navigateTo({
        url: "./SecuritySettings/ChangePhone"
      });
    }
  }
};

export default pageObject;
</script>

<style scoped>
.rule {
  margin-top: 28upx;
  width: 100%;
  text-align: center;
}

text {
  font-size: 28upx;
  font-weight: 400;
  color: rgba(184, 184, 184, 1);
  text-align: center;
}
button {
  width: 690upx;
  height: 88upx;
  background: rgba(82, 153, 247, 1);
  border-radius: 5px;
  font-size: 36upx;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.grace-list {
  /* font-weight: bold; */
  font-size: 36upx;
  padding: 0;
}
.tel {
  font-size: 28upx;
  font-weight: 400;
  color: rgba(184, 184, 184, 1);
}
.grace-list .items .title {
  margin-left: 36upx;
  padding: 13px 30px 13px 0;
}
.grace-list .items .arrow-right {
  height: 46px;
  line-height: 46px;
}
</style>